<template>
  <div class="assist">
		<div class="box">
			<div class="hd">
				<h3>环境检测</h3>
			</div>
			<div class="bd">
				<div v-for="(item,index) in monitor.scaEnvironmentGather" :key="index" class="assist-info">
					<div class="item">
						<div class="thumb">
							<img class="icon" src="../../../assets/img/assist/icon1.png" alt="">
						</div>
						<div class="desc">
							<div class="num">{{item.waterCollectingWellLevel}}</div>
							<div class="name">集水井水位(m)</div>
							<div class="name">电缆沟水位：{{['正常','异常'][item.cableChuteWaterLevel]}}</div>
						</div>
					</div>
					<div class="item">
						<div class="thumb">
							<img class="icon" src="../../../assets/img/assist/icon2.png" alt="">
						</div>
						<div class="desc">
							<div class="num">{{item.temperature}}</div>
							<div class="name">温度(°C)</div>
						</div>
					</div>
					<div class="item">
						<div class="thumb">
							<img class="icon" src="../../../assets/img/assist/icon3.png" alt="">
						</div>
						<div class="desc">
							<div class="num">{{item.humidity}}</div>
							<div class="name">湿度(%)</div>
						</div>
					</div>
					<div class="item">
						<div class="thumb">
							<img class="icon" src="../../../assets/img/assist/icon4.png" alt="">
						</div>
						<div class="desc">
							<div class="num">风向：{{item.windDirection}}</div>
							<div class="name">风力{{item.windStrength}}</div>
							<div class="name">雨量：{{item.rainfall}}毫米</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row clearfix">
			<div class="left">
				<div class="box">
					<div class="hd">
						<h3>照明监视</h3>
					</div>
					<div class="bd">
						<div class="illumination">
							<Table border :columns="columns1" :data="data1"></Table>
							<div class="pagination">
								<span>共{{page.totalNum}}条记录 第{{page.currentPage}}/{{Math.ceil(page.totalNum/page.pageSize)}}页 </span>
								<Page show-sizer @on-change="goPage" @on-page-size-change="goPageSize" :total="page.totalNum" :page-size="page.pageSize" show-elevator />
							</div>
						</div>
						
					</div>
				</div>
			</div>
			<div class="right">
				<div class="box">
					<div class="hd">
						<h3>SF6监视</h3>
					</div>
					<div class="bd">
						<ul v-for="(item,index) in monitor.scaSf6Data" :key="index" class="list">
							<li class="item">
								<div class="thumb">
									<img src="../../../assets/img/assist/sf1.png" alt="" class="icon">
								</div>
								<div class="desc">
									<div class="name">SF6浓度（%）</div>
									<div class="tip">{{item.sf6Value}}</div>
								</div>
							</li>
							<li class="item">
								<div class="thumb">
									<img src="../../../assets/img/assist/sf2.png" alt="" class="icon">
								</div>
								<div class="desc">
									<div class="name">氧气浓度（%）</div>
									<div class="tip">{{item.oxygenDensity}}</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="box mg-top-60">
					<div class="hd">
						<h3>安全范围监视</h3>
					</div>
					<div class="bd">
						<ul class="list">
							<li v-for="(item,index) in monitor.scaSecurityAlarm" :key="index" class="item">
								<div class="thumb">
									<img src="../../../assets/img/assist/defense.png" alt="" class="icon">
								</div>
								<div class="desc">
									<div class="name">{{item.energyUnitId}}</div>
									<div v-if="item.warningName == '告警'" class="tip primary">{{item.warningName}}</div>
									<div v-if="item.warningName == '正常'" class="tip error">{{item.warningName}}</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
  </div>  
</template>

<script>
	import { axiosGet } from '@/api/sysSetting.js'
  export default {
    name: "assist",
    components: {  },
    data () {
      return {
				page:{
					currentPage: 1,
					pageSize: 15,
					totalNum: 0,
					
				},
        columns1: [
					{ title: '序号', key: 'lampDataId' },
					{ title: '照明设备', key: 'energyUnitId' },
					{ title: '照明回路通断状态', key: 'loopOnOffState', render:(h,params)=>{
						return h('div',[
							h('span', ['通','断'][params.row.loopOnOffState] )
						])
					} },
					{ title: '照明控制运行状态', key: 'controlRunState', render:(h,params)=>{
						return h('div',[
							h('span', ['正常','异常'][params.row.controlRunState] )
						])
					} },
					{ title: '故障告警', key: 'faultWarning' },
				],
				data1: [
					{ name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' },
					{ name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' },
					{ name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' },
					{ name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' }
				],
				monitor:{
					scaEnvironmentGather:[{}],
					scaSecurityAlarm:[],
					scaSf6Data:[{}]
				}
      };
    },
    computed: {},
    created () {
      this.initMonitor()
			this.initLamp()
    },
    mounted () {
      // this.$nextTick(() => this.getGeoJson(data))
      // axiosGet('/cps/areas_v2/bound/430382.json', {}).then((data) => {
      //   this.cpsDist = data.result;
      // })
    },
    methods: {
			goPageSize(page){
				this.page.pageSize = page;
				this.initLamp()
			},
			goPage(page){
				this.page.currentPage = page;
				this.initLamp()
			},
      initMonitor(){
				axiosGet('http://222.189.228.150:7016/scada/assist/monitor', {}).then((data) => {
				  this.monitor = data.result;
				})
			},
			initLamp(){
				axiosGet('http://222.189.228.150:7016/scada/assist/lamp', { 
					currentPage: this.page.currentPage,
					pageSize: this.page.pageSize ,
				}).then((data) => {
				  this.data1 = data.custom.data;
					this.page.totalNum = data.totalNum;
				})
				
			}
    }
  };
</script>

<style scoped lang="scss">
	.assist{
		height: 100%;
		overflow: scroll;
	}
	.mg-top-60{
		margin-top: 60px;
	}
	.box{
		display: flex;
		flex-direction: column;
	}
	.box .hd{
		display: flex;
		align-items: center;
		padding-top: 10px;
	}
	.box .hd h3{
		display: flex;
		align-items: center;
		height: 16px;
		border-left: 4px solid #00A4FF;
		padding-left: 10px;
		font-size: 16px;
		font-weight: 400;
		color: #333333;
		margin-bottom: 20px;	
	}
	.box .bd{
		
	}
  .assist{
		display: flex;
		flex-direction: column;
	}
	.assist-info{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.assist-info .item{
		width: 24%;
		height: 140px;
		border-radius: 8px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.assist-info .item:nth-of-type(1){
		background: #FC7F7D;
	}
	.assist-info .item:nth-of-type(2){
		background: #FFD973;
	}
	.assist-info .item:nth-of-type(3){
		background: #46A3F7;
	}
	.assist-info .item:nth-of-type(4){
		background: #90D66D;
	}
	.assist-info .item .thumb{
		width: 132px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.assist-info .item .desc{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.assist-info .item .num{
		font-size: 38px;
		font-weight: 400;
		color: #FFFFFF;
	}
	.assist-info .item .name{
		font-size: 14px;
		font-weight: 400;
		color: #FFFFFF;
	}
	.row{
		margin-top: 40px;
	}
	.row .left{
		width: 67%;
		float: left;
	}
	.row .right{
		width: 30%;
		display: flex;
		float: right;
		flex-direction: column;
	}
	.illumination{
		display: flex;
		flex-direction: column;
	}
	.illumination .pagination{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 30px;
	}
	.illumination .pagination span{
		font-size: 14px;
		font-family: SimSun;
		font-weight: 400;
		color: #666666;
	}
	.list{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}
	.list .item{
		display: flex;
		flex-direction: row;
		width: 50%;
		align-items: center;
		margin-bottom: 30px;
	}
	.list .item .thumb{
		width: 80px;
		height: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.list .item .desc{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.list .item .name{
		font-size: 14px;
		font-weight: 400;
		color: #333333;
		margin-bottom: 10px;
	}
	.list .item .tip{
		font-size: 24px;
		font-weight: 400;
		color: #333333;
	}
	.list .item .tip.primary{
		color: #90D66D;
	}
	.list .item .tip.error{
		color: #FC7F7D;
	}
</style>
